<template>
    <div style="width: 100%;height: 100%;background: #667aa6">
        <div style="position: absolute; width: 100%;">
            <video src="https://yxys.io/operations.mp4" autoplay loop preload="auto"  style="width: 100%; height: 100vh; object-fit: cover" />
        </div>
        <div class="login-bg"></div>
        <div class="unlock-con">
            <unlock :show-unlock="showUnlock" @on-unlock="handleUnlock"></unlock>
        </div>
    </div>
</template>

<script>
import unlock from "./unlock.vue";
import Cookies from "js-cookie";
export default {
  components: {
    unlock
  },
  data() {
    return {
      showUnlock: false
    };
  },
  methods: {
    handleUnlock() {
      let lockScreenBack = document.getElementById("lock_screen_back");
      this.showUnlock = false;
      lockScreenBack.style.zIndex = -1;
      lockScreenBack.style.boxShadow = "0 0 0 0 #667aa6 inset";
      this.$router.push({
        name: Cookies.get("last_page_name") // 解锁之后跳转到锁屏之前的页面
      });
    }
  },
  mounted() {
    this.showUnlock = true;
    if (!document.getElementById("lock_screen_back")) {
      let lockdiv = document.createElement("div");
      lockdiv.setAttribute("id", "lock_screen_back");
      lockdiv.setAttribute("class", "lock-screen-back");
      document.body.appendChild(lockdiv);
    }
    let lockScreenBack = document.getElementById("lock_screen_back");
    lockScreenBack.style.zIndex = -1;
  }
};
</script>

<style lang="less" scoped>
    .login-bg {
    background: black;
    opacity: 0.7;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    }
</style>
